Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条 | 您所在的位置:网站首页 › El tabs表头滚动条 › Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条 |
未去除之前效果: 去除后效果: 只需要去除header的 overflow: scroll属性即可 使用代码: >>> .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden!important; margin-bottom: 0!important; padding-right: 6px; }效果如图: 最右侧没有边框,因为:最后一个th右边框颜色透明了,我们给他设置上边框颜色 效果如图: 我这里给table加的有bordered属性,去掉bordered效果如下: 这就比较完美了,但是如果加上bordered属性,边框外的阴影就比较丑了,如何去掉呢,很简单, 代码如下: >>> .ant-table-header { background: #fff; }最后效果如下图: 完成代码如下: /*去除表头垂直滚动条 begin*/ >>> .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden!important; margin-bottom: 0!important; padding-right: 6px; } >>> .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child { border-right-color: #e8e8e8!important; } >>> .ant-table-header { background: #fff; } /*去除表头垂直滚动条 end*/ |
CopyRight 2018-2019 实验室设备网 版权所有 |